"use client"
import React, { useEffect, useState } from 'react'
import PaymentCart from '@/components/PaymentCart'
import style from './index.module.scss'
import { getFeeList, getFeeTypeApi } from '@/apis/property'

export default function FeePay() {

  const [feeList, setFeeList] = useState([])
  // 费用类型
  const [feeType, setFeeType] = useState([])
  const getFee = async (kw) => {
    const res = await getFeeList(kw)
    if (res.data.length % 3 !== 0) {
      const length = res.data.length
      for (let i = 0; i < 3 - length % 3; i++) {
        res.data.push({
          market: true
        })
      }
    }
    setFeeList(res.data)
  }

  // 获取缴费类型
  const getFeeType = async () => {
    const res = await getFeeTypeApi()
    setFeeType(res.data)
  }
  useEffect(() => {
    getFee()
    getFeeType()
  }, [])

  return (
    <div className={style['fee-container']}>
      <div className={style['title']}>物业缴费</div>
      <div className={style['type']}>
        <div className={style['type-title']}>缴费类型</div>
        <div className={style['type-box']}>
          {feeType.map((item, index) => (
            <div key={index} onClick={() => { getFee(item.type_name) }} className={style['type-item']}>{item.type_name}</div>
          ))}
        </div>
      </div>
      <div className={style['body']}>
        {feeList.map((item, index) => (
          <div key={index} className={style['item']} style={item.market && { opacity: 0 }}>
            <PaymentCart item={item} />
          </div>
        ))}
      </div>
    </div>
  )
}
